<!--
* @FileDescription: 使用模板组件
* @Author: yuec621@outlook.com
* @Date: 2024-11-18 12:36:54
* @LastEditors: Please set LastEditors
* @LastEditTime: 2024-12-30 12:36:54
-->
<template>
    <div class="searBox">
        <vxe-table :data="tableData" height="200">
            <vxe-column type="expand" width="40">
                <template #content="{ row }">
                    <vxe-table :data="row.pointIds">
                        <vxe-column field="pointId" title="测点编号"></vxe-column>
                        <vxe-column field="sensorName" title="名称"></vxe-column>
                        <vxe-column field="placeName" title="安装地点"></vxe-column>
                    </vxe-table>
                </template>
            </vxe-column>
            <vxe-column field="templateName" title="模板名称"></vxe-column>
            <vxe-column title="操作">
                <template #default="{ row }">
                    <el-button type="text" @click="useTempClick(row)">
                        使用
                    </el-button>
                    <el-button type="text" @click="delUseTempClick(row)">
                        删除
                    </el-button>
                </template>
            </vxe-column>
        </vxe-table>
    </div>
</template>
<script setup>
    import {
        computed,
        reactive,
        watchEffect
    } from 'vue';
    import axios from "@/utils/request"
    import {
        searchchannelNoList
    } from '@/api/config'
    import useUserStore from "@/store/modules/user";
    import dayjs from 'dayjs';
    const {
        proxy
    } = getCurrentInstance();
    const calendar = ref(null)
    const userStore = useUserStore();
    const emits = defineEmits([''])
    const props = defineProps({
        tableData: {
            type: Array,
            default: () => {
                return []
            }
        }
    })
    // 重点
    const state = reactive({

    })
    // 使用模板提交功能
    function useTempClick(row){ 
        emits('submitUseTempClick', row)
    }
    function delUseTempClick(row) {
        emits('delUseTempClick', [row.id])
    }
    watchEffect(() => {})
</script>
<style lang="scss" scoped>
    .searBox {
        border-radius: 8px;
        background: rgba(255, 255, 255, 0.8);
        box-shadow: 0px 2px 20px rgba(91, 109, 128, 0.2);
        backdrop-filter: blur(20px);
        width: 400px;
        overflow-x: hidden;
        border: 1px solid rgba(68, 136, 255, 0.1);
        padding: 16px;
    }
</style>